<script setup>
// 其他登录方式组件
</script>

<template>
  <div class="other-login-ways">
    <div class="divider">
      <span>其他登录方式</span>
    </div>
    
    <div class="login-icons">
      <div class="login-icon wechat">
        <svg viewBox="0 0 1024 1024" width="36" height="36" fill="#09BB07">
          <path d="M692.513 347.403c11.298 0 22.468 0.83 33.639 2.077-30.334-141.346-181.478-246.404-354.277-246.404-192.643 0-350.973 131.296-350.973 299.894 0 96.937 52.803 176.597 141.072 238.438l-35.304 106.198 123.318-61.728c44.066 8.717 79.37 17.679 123.554 17.679 11.062 0 22.004-0.594 32.947-1.424-6.937-23.653-10.894-48.465-10.894-74.206 0-154.531 132.838-280.525 296.918-280.525zM497.949 244.919c26.562 0 44.186 17.561 44.186 44.422 0 26.681-17.623 44.656-44.186 44.656-26.681 0-53.279-17.975-53.279-44.656 0-26.862 26.599-44.422 53.279-44.422zM244.26 333.997c-26.681 0-53.577-17.975-53.577-44.656 0-26.862 26.897-44.422 53.577-44.422 26.562 0 44.186 17.561 44.186 44.422 0 26.681-17.623 44.656-44.186 44.656z"></path>
          <path d="M981.522 626.806c0-141.907-141.048-257.843-299.477-257.843-167.779 0-299.894 115.936-299.894 257.843 0 142.38 132.125 257.843 299.894 257.843 35.086 0 70.608-8.894 105.992-17.926l96.937 53.16-26.562-88.52c71.049-53.398 123.11-124.097 123.11-204.557zM597.167 582.384c-17.623 0-35.422-17.623-35.422-35.636 0-17.623 17.799-35.304 35.422-35.304 26.862 0 44.422 17.679 44.422 35.304 0 18.014-17.561 35.636-44.422 35.636zM774.358 582.384c-17.444 0-35.066-17.623-35.066-35.636 0-17.623 17.623-35.304 35.066-35.304 26.58 0 44.422 17.679 44.422 35.304 0 18.014-17.844 35.636-44.422 35.636z"></path>
        </svg>
      </div>
      <div class="login-icon mobile">
        <svg viewBox="0 0 1024 1024" width="32" height="32" fill="#007BFF">
          <path d="M746.667 128a64 64 0 0 1 64 64v640a64 64 0 0 1-64 64H277.333a64 64 0 0 1-64-64V192a64 64 0 0 1 64-64h469.334z m0 64H277.333v640h469.334V192zM512 725.333a42.667 42.667 0 1 1 0 85.334 42.667 42.667 0 0 1 0-85.334z"></path>
        </svg>
      </div>
    </div>
  </div>
</template>

<style scoped>
.other-login-ways {
  margin-top: auto;
  padding-top: 40px;
  padding-bottom: 20px;
}

.divider {
  position: relative;
  text-align: center;
  margin-bottom: 24px;
}

.divider::before,
.divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 30%;
  height: 1px;
  background-color: #e0e0e0;
}

.divider::before {
  left: 0;
}

.divider::after {
  right: 0;
}

.divider span {
  display: inline-block;
  padding: 0 16px;
  background-color: #fff;
  position: relative;
  z-index: 1;
  color: #999;
  font-size: 14px;
}

.login-icons {
  display: flex;
  justify-content: center;
  gap: 40px;
}

.login-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  cursor: pointer;
}
</style> 